<template>
  <div class="page-container">
    <div class="common-content">
      <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
      <div class="search-wrap">
        <el-form
          :inline="true"
          :model="searchFilters"
          :size="searchSize"
          ref="searchFilters"
          label-position="right"
          label-width="100px"
        >
          <el-form-item label="返利编码">
            <el-input v-model="searchFilters.deptId" placeholder="请输入返利编码"></el-input>
          </el-form-item>
          <el-form-item label="供应商编码">
            <el-input v-model="searchFilters.deptId" placeholder="请输入供应商编码"></el-input>
          </el-form-item>
          <el-form-item label="登记时间">
            <el-date-picker v-model="searchFilters.createTimeStart" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="创建日期起"></el-date-picker>
          </el-form-item>
          至
          <el-form-item>
            <el-date-picker v-model="searchFilters.createTimeEnd" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="创建日期止" ></el-date-picker>
          </el-form-item>
          <el-form-item label="是否使用">
            <el-select >
              <el-option label="未使用" value="shanghai"></el-option>
              <el-option label="被占用" value="beijing"></el-option>
              <el-option label="已使用" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <!-- 搜索区域按钮-查询,重置 -->
          <div class="tool-wrap">
            <div class="left-area">
              <el-button-group>
                <el-button type="primary" size="small" @click="findPage()">批量下载</el-button>
                <el-button type="primary" size="small" @click="resetForm()">批量上传</el-button>
                <el-button type="primary" size="small" @click="addForm()">模板下载</el-button>
                <el-button type="primary" size="small" @click="addForm()">删除</el-button>
              </el-button-group>
            </div>
          </div>
          <!-- 表格数据部分 -->
          <div class="table-wrap">
            <jic-table
              :height="350"
              :showOperation="false"
              :operationWidth="200"
              :tableList="tableList"
              :tableHeaderList="tableHeaderList"
              :totalSize="totalSize"
              :showDetailOperation="true"
              :showEditOperation="true"
              :showBatchDelete="false"
              :showSelection="false"
              :showIndex="false"
              @findPage="findPage"
              ref="jicTable"
            ></jic-table>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
//一.导包区
import jicTable from "@/components/jicComponentGallery/jicTable";

//二.数据输出区
export default {
  //2.1 注册组件
  components: {
    jicTable
  },

  //2.2 数据初始化区
  data() {
    return {
      //2.2.1 公共数据初始化
      pageIndex: 0,
      pageSize: 10,
      totalSize: 0, //// 返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini",

      // 2.2.2 表格表头数据
      tableHeaderList: [
        { prop: "id", label: "序号", minWidth: 100, formatter: null },
        { prop: "deptId", label: "登记日期", minWidth: 100, formatter: null },
        { prop: "name", label: "供应商编码", minWidth: 100, formatter: null },
        { prop: "code", label: "供应商姓名", minWidth: 100, formatter: null },
        {
          prop: "type",
          label: "返利金额",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "status",
          label: "结算公司代码",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "merchantId",
          label: "文本描述",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "addressProvinceId",
          label: "状态",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "addressProvinceName",
          label: "返利编码",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "addressCityId",
          label: "绑定结算单号",
          minWidth: 100,
          formatter: null
        }
      ], // 2.2.3 搜索表单对应的数据对象初始化
      searchFilters: {
        id: null,
        deptId: null,
        name: null,
        code: null,
        type: null,
        status: null,
        merchantId: null,
        addressProvinceId: null,
        addressProvinceName: null,
        addressCityId: null,
        addressCityName: null,
        addressAreaId: null,
        addressAreaName: null,
        addressDetail: null,
        ownerId: null,
        ownerName: null,
        ownerShip: null,
        ownerMobile: null,
        createTime: null,
        updateTime: null,
        creator: null,
        updater: null,
        deleteFlag: null,
        merchantName: null,
        merchantCode: null,
        storeType: null
      }
      //dialogVisible: false, //// 是否显示弹窗内容;
      //editDialogVisible1: false,//// 是否可编辑弹窗内容;
      //editLoading: false,////是否显示加载时动画效果;
    }; //return 完结;
  }, //data()方法 完结;

  //2.3 JavaScript 方法区
  methods: {
    //2.3.1 JavaScript 公共方法区

    //2.请求列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }

      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this.utils.request.findMStorePage(this_.searchFilters, function(res) {
        if (res.code === "0000") {
          this_.tableList = res.data.list;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }
      });
    },

    // 3.重置搜索框条件
    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },

    // 4.详情按钮对应的方法(TODO 需要修改路径)
    handleDetail(params) {
      this.$router.push({ path: "/getMStoreDetail/" + params.row.id });
    },

    // 4.详情按钮对应的方法(TODO 需要修改路径)
    handleEdit(params) {
      this.$router.push({ path: "/getMStoreDetail/" + params.row.id });
    },

    addForm(params) {
      params = null;
      this.$router.push({ path: "/getMStoreDetail/" + params });
    },
    // 5.请求条数发生变化
    handleSizeChange(params) {
      this.pageRequest.pageSize = params.size;
    },

    // 6.请求页数发生变化
    handlePageChange(params) {
      this.pageRequest.pageNum = params.number;
      this.findPage();
    },
    // 7.页面弹窗处理方法
    add() {
      this.dialogVisible = true;
    },

    // 8.关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    }

    //==========2.3.1 JavaScript 自定义方法区==========
  },
  //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
  mounted() {
    this.findPage();
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }

  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }

  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
